<template>
  <view>
    <scroll-view
      class="list"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @scrolltolower="onScrollTolower"
    >
      <view class="item" v-for="item in list" :key="item.id">
        <u-swipe-action>
          <u-swipe-action-item :options="options1" @click="onDelete(item.id)">
            <view class="swipe-action u-border-top u-border-bottom btn-right">
              <view>
                <view class="swipe-action__content">
                  <text class="swipe-action__content__text"
                    >客户名称:{{ item.nickname }}</text
                  >
                </view>
                <view class="swipe-action__content">
                  <text class="swipe-action__content__text"
                    >客户来源:{{ item.source.name }}</text
                  >
                </view>
                <view class="swipe-action__content">
                  <text class="swipe-action__content__text"
                    >成交状态:{{ item.deal_text }}</text
                  >
                </view>
              </view>

              <view class="btn">
                <u-button
                  text="回收"
                  type="primary"
                  size="small"
                  :customStyle="btnStyle"
                  @click="onCle(item.id)"
                ></u-button>
                <u-button
                  text="编辑"
                  type="success"
                  size="small"
                  @click="onEdit(item.id)"
                ></u-button>
              </view>
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
      </view>
    </scroll-view>

    <u-button
      type="primary"
      text="添加"
      :customStyle="AddBtnStyle"
      @click="onAdd"
    ></u-button>
    <u-toast ref="uToast"></u-toast>
    <u-modal
      :show="show"
      :title="title"
      :content="content"
      @confirm="onConfirm"
      showCancelButton
      @cancel="show = !show"
    />
  </view>
</template>
<script>
export default {
  data() {
    return {
        // 添加按钮样式
      AddBtnStyle: {
        position: "fixed",
        bottom: 0,
      },
      btnStyle: {
        marginRight: "10px",
      },
      options1: [
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
      list: [],
      page: 1,
      limit: 10,
      listCount: 0,
      LoginAdmin: {},
      busid: 0,
      show: false,
      title: "未知标题",
      content: "未知内容",
      // 状态值
      action: "",
      // 下拉刷新状态
      triggered: false,
      // 上拉加载状态
      finished: false,
    };
  },
  methods: {
    onScrollTolower() {
      if (this.finished) {
        return;
      }

      this.page = this.page + 1;
      this.getPrivateseaData();
    },
    // 查询数据
    async getPrivateseaData() {
      let data = {
        adminid: this.LoginAdmin.id,
        page: this.page,
        limit: this.limit,
      };

      let result = await this.$u.api.manage.PrivateseaIndex(data);
      this.triggered = false;

      if (result && result.code === 1) {
        this.listCount = result.data.count;
        this.list = this.list.concat(result.data.list);
      } else {
        this.finished = true;
        this.$refs.uToast.show({
          type: "error",
          message: result.msg,
        });
        return;
      }
    },
    onRefresh() {
      // 开启下拉刷新
      this.triggered = true;
      // 加载状态为false
      this.finished = false;
      this.page = 1;
      this.list = [];
      this.getPrivateseaData();
    },
    // 回收
    onCle(id) {
      this.busid = id;
      this.title = "回收客户";
      this.content = "是否回收该客户";
      this.action = "clear";
      this.show = true;
    },
    // 删除
    onDelete(id) {
      this.busid = id;
      this.title = "删除客户";
      this.content = "是否删除该客户";
      this.action = "delete";
      this.show = true;
    },
    async onConfirm() {
      let result = "";
      if (this.action === "clear") {
        let data = {
          adminid: this.LoginAdmin.id,
          busid: this.busid,
        };
        result = await this.$u.api.manage.PrivateseaClear(data);
      } else {
        let data = {
          adminid: this.LoginAdmin.id,
          busid: this.busid,
        };
        result = await this.$u.api.manage.PrivateseaDelete(data);
      }

      if (result && result.code === 1) {
        this.$refs.uToast.show({
          type: "success",
          message: result.msg,
        });

        this.show = false;
        setTimeout(() => {
          this.$router.go(0);
        }, 1500);
        return;
      } else {
        this.$refs.uToast.show({
          type: "error",
          message: result.msg,
        });
        return;
      }
    },
    // 编辑
    onEdit(id) {
      this.$u.route({
        url: "/pages/manage/privatesea/edit",
        params: {
          busid: id,
        },
      });
    },
    // 添加
    onAdd() {
        this.$u.route({
        url: "/pages/manage/privatesea/add",
      });
    }
  },
  onLoad() {
    this.LoginAdmin = uni.getStorageSync("admin") ?? {};

    this.getPrivateseaData();
  },
};
</script>

<style lang="scss">
.list {
  /* #ifdef H5 || APP-PULS */
  height: 86vh;
  /* #endif */
  
  /* #ifdef MP-WEIXIN */
  height: 94vh;
  /* #endif */
  overflow: hidden;
}

.btn {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-right: 3vw;
}

.btn-right {
  display: flex;
  justify-content: space-between;
}

.u-page {
  padding: 0;
}

.u-demo-block__title {
  padding: 10px 0 2px 15px;
}

.swipe-action {
  &__content {
    padding: 25rpx 0;

    &__text {
      font-size: 15px;
      color: $u-main-color;
      padding-left: 30rpx;
    }
  }
}
</style>
